<route>
{
  "meta":{
    "title":"消息模板",
    "showMenu":true,
    "serialNum": 30
  }
}
</route>
<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-select
          v-model="queryParams.type"
          placeholder="模板类型"
          style="width: 100%"
          clearable
        >
          <el-option
            v-for="(item,index) in types"
            :key="index"
            :value="item"
            :label="item"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-input
          v-model="queryParams.description"
          placeholder="描述"
          size="small"
          clearable
          prefix-icon="el-icon-search"
        />
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="loadData(1)">查询</el-button>
        <el-button @click="onReset">重置</el-button>

      </el-col>
      <el-col class="mt10">
        <el-button
          type="primary"
          @click="$router.push({ path: '/messageCenter/template/detail' })"
        >新建
        </el-button>
      </el-col>
    </el-row>

    <el-table
      class="mt10"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      current-row-key="id"
      stripe
      border
    >
      <el-table-column prop="code" label="CODE"/>
      <el-table-column prop="type" label="模板类型"/>
      <el-table-column prop="description" label="描述"/>
      <el-table-column prop="actions" label="操作" width="150">
        <template slot-scope="scope">
          <template>
            <span class="table-actionItem">
              <!--              todo-->
              <el-button type="text" @click="$router.push({ name: 'messageCenter-template-detail', query: { id: scope.row.id } })">编辑</el-button>
            </span>
            <span class="table-actionItem">
              <el-popconfirm
                title="确定要删除该模板吗？"
                placement="top"
                @confirm="deleteTemplate(scope.row.id)"
              >
                <el-button class="link-danger" type="text" slot="reference">删除</el-button>
              </el-popconfirm>
            </span>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="pageData.pageSize"
        :pageNo.sync="pageData.pageNo"
        @search="loadData"
      />
    </div>
  </div>
</template>

<script>
import { getMsgTemplateconfigPagelist,getMsgTemplateconfigTypes,deleteMsgTemplateconfig } from '@/apis/paas/MsgTemplateConfigController.js'

export default {
  name: 'Template',
  components: {},
  data () {
    return {
      types: [],
      queryParams: {},
      pageData: {
        pageSize: 10,
        pageNo: 1
      },
      total: 0,
      tableData: [],
      loading: false,
      parsedData: []
    }
  },
  computed: {
    trimedQueryParams () {
      const params = Object.assign({}, this.queryParams)
      for (const prop in params) {
        if (params.hasOwnProperty(prop) && typeof params[prop] === 'string') {
          params[prop] = params[prop].trim()
        }
      }
      return params
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.getTypeList()
      this.loadData()
    },

    getTypeList () {
      getMsgTemplateconfigTypes().then(res => {
        this.types = res || []
      })
    },

    // 获取模板的list
    loadData (pageNo = this.pageData.pageNo) {
      getMsgTemplateconfigPagelist({
        ...this.queryParams,
        ...this.pageData,
        ...this.trimedQueryParams,
        pageNo
      }).then(res => {
        if (res.data.length === 0 && pageNo > 1) {
          this.loadData(pageNo - 1)
          return
        }
        this.tableData = this.parsedData = res.data.map(ele => {
          if (!ele.description) {
            ele.description = ''
          }
          return ele
        })
        this.total = res.totalCount
        this.pageData = {
          pageSize: res.pageSize,
          pageNo: res.pageNo
        }
      }).finally(() => {
        this.loading = false
      })
    },

    deleteTemplate (id) {
      deleteMsgTemplateconfig({ id }).then(res => {
        this.loadData()
        this.$message.success('操作成功')
      })
    },

    onQuery () {
      this.parsedData = this.tableData.filter(d => {
        const { typeId, description } = this.trimedQueryParams
        return (
          ((!!typeId && d.type === typeId) || !typeId) &&
          ((!!description && d.description.includes(description)) || !description)
        )
      })
    },

    onReset () {
      this.queryParams = {}
      this.parsedData = this.tableData
    }
  }
}
</script>

<style></style>
